import { BrowserRouter as Router, Routes, Route, Navigate,Link } from "react-router-dom";
import React from 'react';
import NotFound from "./views/NotFound";
import Film from "./views/films/Film";

import NowPlaying from "./views/films/NowPlaying";
import ComingSoon from "./views/films/ComingSoon";
import Games from "./views/game/Games";

function MyRoute(props) {
    return (
      <Router>
          <ul>
            <li><Link to="/films">电影</Link></li>
            <li><Link to="/games">游戏</Link></li>
          </ul> 
        <Routes>
            {/* index用于嵌套路由，仅匹配父亲路径时，设置渲染的组件解决当嵌套路由有多个子路由但本身无法确认默认渲染哪个子路由的时候，可以增加index属性来指定默认路由。index路由和其他路由不同的地方是它没有path属性，他和父路由共享一个路径 */}
            {/* <Route index element={<Film/>} /> */}

            {/* 路由嵌套 */}
            <Route path='/films' element={<Film/>}>
                <Route path='' element={<Navigate to='/films/nowPlaying' />} />{/* 默认NowPlaying */}
                <Route path='nowPlaying' element={<NowPlaying/>} />{/* 相当于<Route path='/films/nowPlaying' element={<NowPlaying/>} /> */}
                <Route path='comingSoon' element={<ComingSoon/>} />
            </Route>
            <Route path='/games' element={<Games/>} />
            {/* *万能匹配，定义的路由匹配不上的时候就走这里 */}
            {/* <Route path='*' element={<Navigate to='/films' />} /> */}
            <Route path='/' element={<Navigate to='/films' />} />{/* Navigate重定向 */}
            <Route path='*' element={<NotFound />} />
        </Routes>
      </Router>
    )
}


class App extends React.Component{

  render() {
    return (
      <div>
          {/* <ul>
            <li><Link to="/films">电影</Link></li>
            <li><Link to="/films">游戏</Link></li>
          </ul> */}
        <MyRoute/>
      </div>
    );
  }
}

export default App;




